// 自调用函数---小蛇
(function () {
    //存放小蛇的额每个身体部分
    var elements = [];

    /* 构造函数 ----小蛇的属性 */
    function Snake(width, height, direction) {
        // 小蛇的每个部分的宽度
        this.width = width || 20;
        this.height = height || 20;
        // 小蛇的身体
        this.body = [
            { x: 3, y: 2, color: "red" },//头
            { x: 2, y: 2, color: "orange" },//身体
            { x: 1, y: 2, color: "orange" }//身体
        ]
        // 方向
        this.direction = direction || "right";
    }
    
    /* 为原型添加方法---小蛇初始化的方法*/
    Snake.prototype.init = function (map) {
        /* 先删除之前的小蛇 */
        remove();
        /* 循环遍历创建div */
        for (let i = 0; i < this.body.length; i++) {
            var obj = this.body[i];
            // 创建div
            var div = document.createElement("div");
            // 加入到地图中
            map.appendChild(div);
            // 设置div的样式
            div.style.position = "absolute";
            div.style.width = this.width + "px";
            div.style.height = this.height + "px";
            // 横纵坐标
            div.style.left = (obj.x * this.width) + "px";
            div.style.top = (obj.y * this.height) + "px";
            div.style.backgroundColor = obj.color;
            // 方向

            // 将div加入到数组中
            elements.push(div)
        }
    }
    
    /* 为原型添加方法---小蛇动起来 */
    Snake.prototype.move = function (food, map) {
        /* 改变小蛇身体的坐标位置 */
        var i = this.body.length - 1;//2
        for (; i > 0; i--) {
            this.body[i].x = this.body[i - 1].x;
            this.body[i].y = this.body[i - 1].y;
        }
        /* 判断方向---改变小蛇头部的坐标位置 */
        switch (this.direction) {
            case "right": this.body[0].x += 1; break;
            case "left": this.body[0].x -= 1; break;
            case "top": this.body[0].y -= 1; break;
            case "bottom": this.body[0].y += 1; break;
        }

        /* 判断小蛇有没有 吃到食物 */
        /* 小蛇的头的坐标 和食物的坐标一致 */
        var headX = this.body[0].x*this.width;
        var headY = this.body[0].y*this.height;
        /* 判断食物的坐标与小蛇头坐标是否相同 */
        if(headX==food.x&&headY==food.y){
            // alert("装上了");
            //获取小蛇最后的尾巴
            var last = this.body[this.body.length-1];
            /* 把最后的蛇尾巴复制一份，加到最后面 */
            this.body.push({
                x:last.x,
                y:last.y,
                color:last.color
            });
            /* 把食物删除  并重新初始化食物 */
            food.init(map);
        }
    }
    
    /* 私有函数---- 删除小蛇*/
    function remove() {
        /* 获取这个数组 */
        var i = elements.length - 1;
        for (; i >= 0; i--) {
            // 先从当前的子元素中找到该子级的父元素，然后弄死这个子集元素
            var ele = elements[i];
            /* 从map地图上删除这个子元素div */
            ele.parentNode.removeChild(ele);
            /* 在数组中删除这个元素 */
            elements.splice(i, 1);
        };
    };

    /* 将snake构造函数暴露给window */
    window.Snake = Snake;
}());
